<template>
	<view class="cooper_pay">
		<view class='pay_con'>

			<view class="pay_con_top" v-for="item in proxyOrder.goods_data" :key='item.id'>
				<image class="top_img" :src="item.goods_icon" mode=""></image>
				<view class="top_info">
					<view>
						{{item.goods_name}}
					</view>
					<view>
						{{item.goods_name}}
					</view>
				</view>
				<view class="top_price">
					<text>￥{{item.order_price}}</text> 
				</view>
			</view>


		</view>
		
		<!-- 底部提交订单 -->
		<view class="submit_rder">
			<view class="submit_txt"> 
				<text>合计:</text>
				<text>￥{{proxyOrder.order_price}}</text>
			</view>
			<view class="submit_btn" @click="cooperationPay">
				提交订单
			</view>
		</view>
		
		<ProxyForm :showProxyForm='showProxyForm' :downProxyForm="downProxyForm" :areaId='areaId'></ProxyForm>
		
	</view>
</template>

<script>
	import ProxyForm from '../../../components/proxyform/index.vue'
	import {
		createProxyOrder,
		cooperationPay,
		reSign
	} from '@/api/user'
	export default {
		components:{
			ProxyForm
		},
		data() {
			return {
				areaId: null,
				levelId: null,
				proxyOrder: '',
				areaListQuantity: 1,
				// 订单id
				orderId: null ,
				// 输入框展示
				showProxyForm: false,
				// 城市id
				areaId:null
			};
		},
		 
		onLoad(options) {  
			this.areaListQuantity = options.num
			this.areaId = options.id
		},
		mounted() {
			let that = this
			uni.getStorage({
			    key: 'proxyOrder',
			    success: function (res) {  
					that.proxyOrder = res.data 
					that.orderId = res.data.id 
			    } 
			});
		},
		methods: {
			cooperationPay(){  
				 
				let that = this
				
				cooperationPay(that.orderId).then(res => { 
					if(res.data.status == 200){  
						let paytype = res.data.result   
						// 重新签名
						let data = {
							appId: res.data.result.appid,
							nonceStr: res.data.result.nonce_str,
							package:  'prepay_id=' +  res.data.result.prepay_id
						}
						// 重新签名
						data && that.reSign(data)
					}
				})
			},
			// 重新签名
			reSign(data){
				let that = this
				reSign(data).then(res => { 
					if(that.areaListQuantity == 1 || that.areaListQuantity == 2){
						// 省市提交
						that.showProxyForm = true
						return 
					} 
					if(res.data.status == 200){  
						WeixinJSBridge.invoke(
						      'getBrandWCPayRequest', {
								    appId: res.data.result.appId,
						        	timeStamp: res.data.result.timeStamp + '',
						        	nonceStr: res.data.result.nonceStr,
						        	package: res.data.result.package,
						        	signType:  res.data.result.signType,
						        	paySign: res.data.result.paySign,
						      },
						      function(res){
						      if(res.err_msg == "get_brand_wcpay_request:ok" ){
						      // 使用以上方式判断前端返回,微信团队郑重提示：
									return that.$util.Tips({
										title: res.msg,
										icon: 'success'
									});
						      } else {
								  return that.$util.Tips({
									 title: res.msg,
									 icon: 'success'
								  });

							  }
						
						// uni.requestPayment({
						// 	timeStamp: res.data.result.timeStamp,
						// 	nonceStr: res.data.result.nonceStr,
						// 	package: res.data.result.package,
						// 	signType:  res.data.result.signType,
						// 	paySign: res.data.result.paySign,
						// 	success(res) {
						// 		uni.hideLoading();
						// 		return that.$util.Tips({
						// 			title: res.msg,
						// 			icon: 'success'
						// 		});
						// 	},
						// 	fail: function(e) {
						// 		uni.hideLoading();
						// 		return that.$util.Tips({
						// 			title: '取消支付'
						// 		});
						// 	},
						// 	complete: function(e) {
						// 		uni.hideLoading();
						// 		if (e.errMsg == 'requestPayment:cancel') return that.$util.Tips({
						// 			title: '取消支付'
						// 		});
						// 	},
						})
					}
				})
			},
			// 关闭弹框
			downProxyForm(){
				this.showProxyForm = false
			}
		}
	}
</script>

<style lang="less">
	.cooper_pay {
		padding: 10rpx 0; 
		overflow-x: hidden;
		.pay_con {
			line-height: 36rpx;
			border-radius: 20rpx;
			background-color: #fff;

			.pay_con_top { 
				padding-bottom: 20rpx;
				display: flex;   
				border-bottom: 2rpx solid #eee;
				.top_img { 
					margin: 20rpx;
					width: 100rpx;
					height: 100rpx;
					border-radius: 20rpx;
				}

				.top_info { 
					padding-top: 20rpx;
					flex: 1;

					// & view:nth-child(1),
					// view:nth-child(2) {
					// 	display: -webkit-box;
					// 	-webkit-box-orient: vertical;
					// 	-webkit-line-clamp: 2;
					// 	overflow: hidden;
					// }

					& view:nth-child(2) {
						margin-top: 20rpx;
						font-size: 26rpx;
						color: #8c8c8c;
					}
				}

				.top_price { 
					padding: 20rpx 10rpx 0 0;
					width: 260rpx;
					text-align: right;
					font-size: 28rpx; 
					font-weight: 700;
					color: #989898; 
					& text:nth-child(1) {
						display: block;
						font-size: 30rpx;
						color: #f96422;
						 text-align: center;
					}
				}
			}
		}
		
		.submit_rder{ 
			padding: 20rpx 0 0 320rpx;
			position: fixed;
			display: flex;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.submit_txt{
				line-height: 80rpx; 
				& text:nth-child(2){
					color: #f96422;
					margin-right: 40rpx;
				}
			}
			.submit_btn{
				width: 160rpx;
				height: 80rpx;
				color: #fff;
				line-height: 80rpx;
				border-radius: 45rpx;
				text-align: center; 
				background-image: linear-gradient(to right, #f62c2c, #f96829); 
			}
		}
	}
</style>
